<template>
    <div class="knowBox">
        <div class="knowBox-head">
            <p>knowledgBooKS / 天空</p>
            <h3 style="float: left">天空</h3>
            <b style="float: right; margin-right:30px">otherKnowledges</b>
        </div> 
        <div class="knowBox-main">
            <img width="650px" height="400px" class="image_kay" :src="obj.cover" alt="" />
            <div class="knowBox-maintitle">
                <h3  style="color: var(--titleHcolor);">{{ obj.title }}</h3>
                <p style="color:#b2aead; font-size:14px ">{{ obj.summary }}</p>
                <p style="color:#b2aead; font-size:14px ">1033 reading Count·2023-01-04 21:17:49</p>
                <button class="knowBox-mainbtn" disabled>startReading</button> 
            </div>
            <div class="knowBox-uls">
                <ul>
                    <li> 
                        <span>1111  </span>
                        <div class="timeout">2023-2-1 17:36> </div> 
                    </li>
                    <li> 
                        <span>2222</span>
                        <div  class="timeout">2023-2-1 17:36> </div> 

                    </li>
                    <li> 
                        <span>3333</span>
                        <div  class="timeout">2023-2-1 17:36> </div> 

                    </li>
                </ul>
                
            </div>
        </div> 
        <div class="knowBox_recommendToReading">
            <p class="empty">empty</p>
        </div> 
    
  </div>
</template>

<script>
import { Tiankongdeil } from "../../api/index";
export default {
  data() {
    return {
      obj: {},
    };
  },
  mounted() {
    this.knowList();
  },
  methods: {
    async knowList() {
      const { data } = await Tiankongdeil(this.$route.params.id);
      this.obj = data.data;
      console.log(data.data);
    },
  },
};
</script>

<style lang="scss" scoped>
    .knowBox{
        width:1000px;
        height:120vh; 
        .knowBox-head{
            width:1000px;
            height:100px;
            background: var(--contentBackground);
            color: var(--titleHcolor);
            margin-bottom:20px;
        } ;            
            .knowBox-main{ 
                width:670px; 
                background: var(--contentBackground);


                .knowBox-maintitle{
                    width:670px;
                    height:200px; 
                    text-align:center;

                    .knowBox-mainbtn{
                        width:120px;
                        height:30px;
                        line-height:30px;
                        background:red;
                        border-radius:5px;
                        color:#fff;
                        border:none;
                    }
                }
                .knowBox-uls{
                    width:670px;
                    height:135px; 
                    li{
                        color:#75645c; 
                        width:670px;
                        height:45px; 
                        line-height:45px;
                        position: relative;
                        span{
                            padding-left:10px; 
                        } 
                        .timeout{

                             position: absolute;
                             right:10px;
                             top:0;
                             display:none;
                        }
                    }      
                    li:hover{
                        background:#ddd;
                        .timeout{
                            display:block;
                        }
                    }
                } 
            } 
        .knowBox_recommendToReading {
            background: var(--contentBackground);
            overflow: hidden;
            width:310px;
            height:60px;  
            position: absolute;
            top:200px;
            right:260px;
            text-align:center;
            color:#ddd;
        }
    }
</style>
